<template>
  <div class="container flex-column">
    <div class="tool-box  flex-between">
      <div class="left flex-box">
        <div class="flex-box">
          <span>设备名称</span>
          <el-input type="text" v-model="query.deviceName"></el-input>
        </div>
        <div class="flex-box">
          <span>创建时间</span>
          <el-date-picker
            class="ml-10"
            v-model="query.daterange"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间">
          </el-date-picker>
        </div>
      </div>
      <div class="right flex-box">
        <el-button plain icon="el-icon-search" @click="page.currentPage = 1;onLoad(page)">搜索</el-button>
        <el-button plain  type="danger" icon="el-icon-delete" @click="searchReset">清空</el-button>
      </div>

    </div>
    <div class="m-table">
      <div class="btn-box flex-between">
        <el-button  type="primary" plain icon="el-icon-circle-plus-outline"
                    v-if="permissionList.addBtn" @click="addClick">新增</el-button>
      </div>
      <el-table header-cell-class-name="table-header"
                v-loading="loading"
                :data="data" stripe
                style="width: 100%">
        <el-table-column
          type="index"
          width="100"
          label="序号"
        >
        </el-table-column>
        <el-table-column
          prop="deviceName"
          label="设备名称"
        >
        </el-table-column>
        <el-table-column
          prop="deviceTypeName"
          label="设备类型"
        >
        </el-table-column>

        <el-table-column
          prop="createTime"
          label="创建时间"
        >
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
        >
          <!--1开启 2关闭-->
          <template slot-scope="{row}">
            <el-switch
              @change="(val)=>{statusChange(val,row)}"
              v-model="row.status"
              :active-value="1"
              :inactive-value="2">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          v-if="hasOperatePermission"
          prop="date"
          label="操作"
        >
          <template slot-scope="{row}">
            <div class="flex-box">
              <el-button v-if="permissionList.editBtn" size="mini"
                         type="primary"
                         @click="editClick(row)"
                         plain>编辑</el-button>
              <el-button v-if="permissionList.delBtn" size="mini"
                         @click="rowDel(row)"
                         type="danger" plain>删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          @current-change="currentChange"
          :current-page="page.currentPage"
          :page-size="page.pageSize"
          layout="total,  prev, pager, next, jumper"
          :total="page.total">
        </el-pagination>
      </div>
    </div>
    <add-modal ref="add"
               @rowSave="rowSave"
               @rowUpdate="rowUpdate"
               :deviceTypeList="deviceTypeList"></add-modal>
  </div>
</template>

<script>
  import {getDevType} from "../../api/platform/devicetable";
  import {getList, getDetail, add, update, remove,updateStatus} from "@/api/platform/productdevicealarm";
  import {mapGetters} from "vuex";
  import addModal from './alarm-components/add-modal'
  export default {
    components:{
      addModal
    },
    data() {
      return {
        deviceTypeList:[],
        form: {},
        query: {},
        loading: true,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        selectionList: [],
        option: {
          height: 'auto',
          calcHeight: 210,
          searchShow: true,
          searchMenuSpan: 6,
          tip: false,
          border: true,
          index: true,
          viewBtn: true,
          selection: true,
          column: [
            {
              label: "主键",
              prop: "id",
              rules: [{
                required: true,
                message: "请输入主键",
                trigger: "blur"
              }]
            },
            {
              label: "设备id",
              prop: "deviceId",
              rules: [{
                required: true,
                message: "请输入设备id",
                trigger: "blur"
              }]
            },
            {
              label: "设备id",
              prop: "deviceName",
              rules: [{
                required: true,
                message: "请输入设备id",
                trigger: "blur"
              }]
            },
            {
              label: "备注",
              prop: "remark",
              rules: [{
                required: true,
                message: "请输入备注",
                trigger: "blur"
              }]
            },
            {
              label: "",
              prop: "deviceType",
              rules: [{
                required: true,
                message: "请输入",
                trigger: "blur"
              }]
            },
            {
              label: "",
              prop: "deviceTypeName",
              rules: [{
                required: true,
                message: "请输入",
                trigger: "blur"
              }]
            },
          ]
        },
        data: []
      };
    },
    computed: {
      ...mapGetters(["permission"]),
      permissionList() {
        return {
          addBtn: this.vaildData(this.permission.productdevicealarm_add, false),
          viewBtn: this.vaildData(this.permission.productdevicealarm_view, false),
          delBtn: this.vaildData(this.permission.productdevicealarm_delete, false),
          editBtn: this.vaildData(this.permission.productdevicealarm_edit, false)
        };
      },
      hasOperatePermission(){
        return  this.permissionList.delBtn || this.permissionList.editBtn
      },
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
      }
    },
    methods: {
      getDevType(){
        getDevType().then(res=>{
          const data = res.data.data;
          this.deviceTypeList = data
        })
      },
      statusChange(val,row){
        const data = {
          id:row.id,
          status:val
        }
        updateStatus(data).then(res=>{
          row.status = val
          this.$message.success('修改成功!')
        }).catch(err=>{
          row.status = val===1?2:1
        })
      },
      editClick(row){
        this.$refs.add.showModal(row)
        this.$refs.add.type = 'edit';
      },
      addClick(){
        this.$refs.add.showModal()
        this.$refs.add.type = 'add';
      },
      rowSave(row, done, loading) {
        add(row).then(() => {
          done();
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        }, error => {
          window.console.log(error);
          loading();
        });
      },
      rowUpdate(row, index, done, loading) {
        update(row).then(() => {
          done();
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        }, error => {
          window.console.log(error);
          loading();
        });
      },
      rowDel(row) {
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            return remove(row.id);
          })
          .then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          });
      },
      handleDelete() {
        if (this.selectionList.length === 0) {
          this.$message.warning("请选择至少一条数据");
          return;
        }
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            return remove(this.ids);
          })
          .then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.$refs.crud.toggleSelection();
          });
      },
      beforeOpen(done, type) {
        if (["edit", "view"].includes(type)) {
          getDetail(this.form.id).then(res => {
            this.form = res.data.data;
          });
        }
        done();
      },
      searchReset() {
        this.query = {};
        this.onLoad(this.page);
      },
      searchChange(params, done) {
        this.query = params;
        this.page.currentPage = 1;
        this.onLoad(this.page, params);
        done();
      },
      selectionChange(list) {
        this.selectionList = list;
      },
      selectionClear() {
        this.selectionList = [];
        this.$refs.crud.toggleSelection();
      },
      currentChange(currentPage){
        this.page.currentPage = currentPage;
      },
      sizeChange(pageSize){
        this.page.pageSize = pageSize;
      },
      onLoad(page, ) {
        this.loading = true;
        let params = {}
        params.deviceName = this.query.deviceName
        if(this.query.daterange&&this.query.daterange.length && this.query.daterange[0]){
          params.startTime = this.query.daterange[0]
          params.endTime = this.query.daterange[1]
        }
        getList(page.currentPage, page.pageSize, params).then(res => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
        });
      }
    },
    mounted() {
      this.onLoad(this.page)
      this.getDevType()
    }
  };
</script>

<style>
</style>
